<template>
  <div class="server-status" v-reveal="{ delay: 50 }">
    <el-card class="status-card">
      <div class="status-content">
        <div class="status-header">
          <h2 class="status-title">服务器地址</h2>
          
          <!-- 服务器基本信息卡片网格 -->
          <div class="info-grid">
            <!-- 服务器IP卡片 -->
            <div class="info-card" v-reveal="{ delay: 100, distance: 16 }">
              <p class="info-label">服务器IP</p>
              <p class="info-value">mc.kbblet.cn:25565</p>
            </div>
            
            <!-- 资源下载卡片 -->
            <div class="info-card" v-reveal="{ delay: 160, distance: 16 }">
              <p class="info-label">资源下载</p>
              <a href="https://www.123865.com/s/anDgTd-ZyiUH" class="info-link" target="_blank" rel="noopener noreferrer">
                <i class="fa-solid fa-download"></i> 123云盘
              </a>
            </div>
            
            <!-- 服务器版本卡片 -->
            <div class="info-card" v-reveal="{ delay: 220, distance: 16 }">
              <p class="info-label">版本</p>
              <p class="info-value">1.21.4</p>
            </div>
          </div>
        </div>
        
        <div class="status-section" v-reveal="{ delay: 280 }">
          <div class="status-header-row">
            <h3 class="status-subtitle">服务器状态</h3>
            <button 
              @click="refreshStatus"
              class="refresh-button"
              :disabled="loading"
              aria-label="刷新服务器状态"
            >
              <i class="fa-solid fa-refresh" :class="{ 'fa-spin': loading }"></i>
            </button>
          </div>
          
          <div class="status-grid">
            <!-- 在线人数卡片 -->
            <div class="status-info-card" v-reveal="{ delay: 340, distance: 16 }">
              <p class="status-label">在线人数</p>
              <div class="status-value-container">
                <p class="status-value">
                  <span v-if="loading" class="animate-pulse">Loading...</span>
                  <span v-else>{{ serverStatus.playerCount }}/{{ serverStatus.maxPlayers }}</span>
                </p>
              </div>
            </div>
            
            <!-- 服务器状态卡片 -->
            <div class="status-info-card" v-reveal="{ delay: 400, distance: 16 }">
              <p class="status-label">服务器状态</p>
              <div class="status-value-container">
                <p class="status-value" :class="{ 'online': serverStatus.online, 'offline': !serverStatus.online }">
                  <span v-if="loading" class="animate-pulse">
                    <i class="fa-solid fa-circle text-xs"></i> 加载中...
                  </span>
                  <span v-else>
                    <i class="fa-solid fa-circle text-xs"></i> {{ serverStatus.online ? '在线' : '离线' }}
                  </span>
                </p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="status-actions" v-reveal="{ delay: 460 }">
          <el-button 
            type="primary" 
            size="large"
            @click="joinServer"
            :disabled="!serverStatus.online"
            :loading="loading"
            class="join-button"
          >
            {{ serverStatus.online ? '立即加入' : '服务器离线' }}
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { Monitor, Warning } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getServerStatus } from '../api/serverApi'

export default {
  name: 'ServerStatus',
  components: {
    Monitor,
    Warning
  },
  setup() {
    const serverStatus = ref({
      online: false,
      playerCount: 0,
      maxPlayers: 50,
      ping: 0,
      version: '1.21.4'
    })
    
    const loading = ref(false)
    let refreshInterval = null

    const fetchServerStatus = async () => {
      loading.value = true
      try {
        const response = await getServerStatus()
        if (response.success) {
          serverStatus.value = response.data
        } else {
          console.error('获取服务器状态失败:', response.message)
          ElMessage.error('获取服务器状态失败')
          // 提供默认值
          serverStatus.value = {
            online: false,
            playerCount: 0,
            maxPlayers: 50,
            ping: 0,
            version: '1.21.4'
          }
        }
      } catch (error) {
        console.error('获取服务器状态失败:', error)
        ElMessage.error('获取服务器状态失败')
        // 提供默认值
        serverStatus.value = {
          online: false,
          playerCount: 0,
          maxPlayers: 50,
          ping: 0,
          version: '1.21.4'
        }
      } finally {
        loading.value = false
      }
    }

    const refreshStatus = () => {
      fetchServerStatus()
    }

    const joinServer = () => {
      if (serverStatus.value.online) {
        navigator.clipboard.writeText('mc.kbblet.cn:25565')
        ElMessage.success('服务器IP已复制到剪贴板！')
      }
    }

    onMounted(() => {
      fetchServerStatus()
      // 每30秒自动刷新
      refreshInterval = setInterval(fetchServerStatus, 30000)
    })

    onUnmounted(() => {
      if (refreshInterval) {
        clearInterval(refreshInterval)
      }
    })

    return {
      serverStatus,
      loading,
      refreshStatus,
      joinServer
    }
  }
}
</script>

<style scoped>
.server-status {
  margin: 20px 0;
}

.status-card {
  background: white;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.status-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.status-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.status-header {
  text-align: center;
}

.status-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 24px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 28rem;
  margin: 0 auto;
}

.info-card {
  background: #f9fafb;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  text-align: center;
}

.info-card:hover {
  border-color: #4CAF50;
}

.info-label {
  color: #6b7280;
  font-size: 0.875rem;
  margin-bottom: 4px;
}

.info-value {
  color: #1f2937;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-weight: 500;
}

.info-link {
  color: #4CAF50;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: color 0.3s ease;
}

.info-link:hover {
  color: #388e3c;
  text-decoration: underline;
}

.status-section {
  text-align: center;
}

.status-header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.status-subtitle {
  font-size: 1.125rem;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.refresh-button {
  color: #6b7280;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
}

.refresh-button:hover {
  color: #4CAF50;
}

.refresh-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 28rem;
  margin: 0 auto;
}

.status-info-card {
  background: #f9fafb;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  text-align: center;
}

.status-info-card:hover {
  border-color: #4CAF50;
}

.status-label {
  color: #6b7280;
  font-size: 0.875rem;
  margin-bottom: 4px;
}

.status-value-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-value {
  color: #1f2937;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-value.online {
  color: #4CAF50;
  font-weight: bold;
}

.status-value.offline {
  color: #ef4444;
  font-weight: bold;
}

.status-actions {
  display: flex;
  justify-content: center;
}

.join-button {
  border-radius: 50px;
  font-weight: 600;
  padding: 16px 32px;
  font-size: 1.125rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(76, 175, 80, 0.2);
}

.join-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px -3px rgba(76, 175, 80, 0.3);
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

.fa-spin {
  animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .status-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .status-content {
    gap: 20px;
  }
  
  .join-button {
    padding: 12px 24px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .status-card {
    margin: 10px;
  }
  
  .info-card,
  .status-info-card {
    padding: 12px;
  }
  
  .status-title {
    font-size: 1.25rem;
  }
  
  .status-subtitle {
    font-size: 1rem;
  }
}
</style>